import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores/modules/user'
import { useAuthStore } from '@/stores/modules/auth'
import { ROUTER_WHITE_LIST } from '@/config'
import { initDynamicRouter } from '@/routers/modules/dynamicRouter'
import { staticRouter, errorRouter } from '@/routers/modules/staticRouter'
import NProgress from '@/config/nprogress'
import { toLogin, doCheckTokenTask } from '@/utils/token'
import { getUrlVariable, resetUri } from '@/utils/redirect'
const mode = import.meta.env.VITE_ROUTER_MODE

const routerMode = {
  hash: () => createWebHashHistory(),
  history: () => createWebHistory(import.meta.env.VITE_PUBLIC_PATH)
}
/**
 * @description 📚 路由参数配置简介
 * @param path ==> 路由菜单访问路径
 * @param name ==> 路由 name (对应页面组件 name, 可用作 KeepAlive 缓存标识 && 按钮权限筛选)
 * @param redirect ==> 路由重定向地址
 * @param component ==> 视图文件路径
 * @param meta ==> 路由菜单元信息
 * @param meta.icon ==> 菜单和面包屑对应的图标
 * @param meta.title ==> 路由标题 (用作 document.title || 菜单的名称)
 * @param meta.activeMenu ==> 当前路由为详情页时，需要高亮的菜单
 * @param meta.isLink ==> 是否外链
 * @param meta.isHide ==> 是否在菜单中隐藏 (通常列表详情页需要隐藏)
 * @param meta.isFull ==> 菜单是否全屏 (示例：数据大屏页面)
 * @param meta.isAffix ==> 菜单是否固定在标签页中 (首页通常是固定项)
 * @param meta.isKeepAlive ==> 当前路由是否缓存
 * @param meta.showMap ==> 显示地图
 * */
const router = createRouter({
  history: routerMode[mode](),
  routes: [...staticRouter, ...errorRouter],
  strict: false,
  scrollBehavior: () => ({ left: 0, top: 0 })
})

let flag = false
/**
 * @description 路由拦截 beforeEach
 */
router.beforeEach(async (to, from, next) => {
  try {
    // 1.NProgress 开始
    NProgress.start()
    const userStore = useUserStore()
    if (!flag) {
      await doCheckTokenTask()
      await userStore.getUserInfo()
    }
    const authStore = useAuthStore()

    // 2.动态设置标题
    const title = import.meta.env.VITE_GLOB_APP_TITLE
    document.title = to.meta.title ? `${to.meta.title} - ${title}` : title

    // 4.判断访问页面是否在路由白名单地址(静态路由)中，如果存在直接放行
    if (ROUTER_WHITE_LIST.includes(to.path)) return next()

    // 5.判断是否有 Token，没有重定向到 login 页面
    if (import.meta.env.VITE_LOGIN == 'on') {
      if (!userStore.token) {
        await toLogin(true)
      }
    }

    // 6.如果没有菜单列表，就重新请求菜单列表并添加动态路由
    if (!authStore.authMenuListGet.length && to.path !== '666') {
      await initDynamicRouter()
      return next({ ...to, replace: true })
    }

    // 7.存储 routerName 做按钮权限筛选
    authStore.setRouteName(to.name as string)

    // 8.正常访问页面
    next()
  } catch (e) {
    console.error(e)
    next()
  } finally {
    flag = true
  }
})

/**
 * @description 重置路由
 */
export const resetRouter = () => {
  const authStore = useAuthStore()
  authStore.flatMenuListGet.forEach(route => {
    const { name } = route
    if (name && router.hasRoute(name)) router.removeRoute(name)
  })
}

/**
 * @description 路由跳转错误
 */
router.onError(error => {
  NProgress.done()
  console.warn('路由错误', error.message)
})

/**
 * @description 路由跳转结束
 */
router.afterEach(() => {
  const accessToken = getUrlVariable('accessToken')
  if (accessToken) {
    resetUri()
  }
  NProgress.done()
})

export default router
